import React, { Component } from 'react';
import './category.css';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';


class Category extends Component {

    constructor(props){

        super();

        this.props = props;

        this.ulWidth = 0;

    }

    renderPageLi(){
        let data = this.props.data;
        let width = this.props.width;
        let pages = data.pages;

        let liWidth = width * 0.285;

        this.ulWidth = this.getUlWidth(liWidth, width);

        let li = pages.map((value, index)=>{


            return (
                <li key={index} style={{width:liWidth}} className="page-box">
                    <Link to={"/detail/"+value.book} >
                        <div className="page-cover">
                        <img alt='' src={value.img} />
                        <div className="page-shadow">
                            <span className="question-count">{value.count}</span>
                        </div>
                        <div className="page-name">
                            {value.name}
                        </div>
                        <div className="page-production">
                            {value.mark}
                        </div>
                        </div>
                    </Link>
                </li>
            );

        });

        return li;
    }

    getUlWidth(width, boxWidth){

        let pageCount= this.props.data.pages.length;

        if(pageCount <3){
            return boxWidth;
        }

        width = (width + 11) * pageCount;

        return width;
    }

    
    render() {

        let data = this.props.data;
        let liList = this.renderPageLi();
        let ulWidth = this.ulWidth;
 
        return (
            <div className="category-card">
               <div className="category-title">
                   <img className="category-img" src={data.icon} alt="" />
                   <div className="category-text">
                       <span className="category-name">{data.name}</span>
                       <span className="category-advertise">{data.remark}</span>
                   </div>
               </div>
               <div className="category-page-box-view">
                   <ul className="category-page-box" style={{width:ulWidth}}>
                       {liList}
                   </ul>
               </div>
           </div>
        );
    }
}

export default Category;